<template>
	<div style="position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:-6px;z-index: 100;" v-show="selected"></i>
		<van-button type="primary" style="margin:5px 10px;" size="small" @click.stop="onClickHandler"
			:block="componentModel.block">{{componentModel.labelExpression}}</van-button>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignButtonComponent",
		props: ["componentModel"],
		data() {
			return {
				selected: false,
				vue_model: "",
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label"
					},
					{
						"key": "labelExpression",
						"label": "标签",
						"editor": "text"
					},
					{
						"key": "readonly",
						"label": "只读逻辑",
						"editor": "textarea"
					},
					{
						"key": "visible",
						"label": "显示逻辑",
						"editor": "textarea"
					},
					{
						"key": "onClickExpression",
						"label": "单击事件",
						"editor": "textarea"
					},
					{
						"key": "colorType",
						"label": "颜色类型",
						"editor": "select",
						"selectItems": [{
								"name": "",
								"value": ""
							},
							{
								"name": "primary",
								"value": "primary"
							},
							{
								"name": "success",
								"value": "success"
							},
							{
								"name": "info",
								"value": "info"
							},
							{
								"name": "warning",
								"value": "warning"
							},
							{
								"name": "danger",
								"value": "danger"
							},
						]
					}, {
						"key": "confirmMessage",
						"label": "确认消息",
						"editor": "textarea"
					}, {
						"key": "clientPageCode",
						"label": "客户端页面",
						"editor": "text"
					}, {
						"key": "serverPageCode",
						"label": "服务端页面",
						"editor": "text"
					}, {
						"key": "block",
						"label": "块级元素",
						"editor": "checkbox"
					}
				]
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeMount() {
			if (this.componentModel.labelExpression == undefined) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"labelExpression","按钮");
			}
			if (this.componentModel.block == undefined) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"block",false);
			}
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.mobileComponentClickHandler(this);
			},
			getPropertyValue(propertyKey) {
				if (propertyKey == "ID") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				} else if (propertyKey == "labelExpression") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"labelExpression");
				} else if (propertyKey == "block") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"block");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "labelExpression") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"labelExpression",propertyValue);
				} else if (propertyKey == "block") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"block",propertyValue);
				}
			},
			setSelected(selected) {
				this.selected = selected;
			}
		},
	}
</script>

<style>
</style>
